<template>
  <div class="customer-claim-container">
    <!-- 客户认领 -->
    <div class="account-query">
      <h1>客户认领申请</h1>
      <ui-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="{margin-left: -20px;}">
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="8">
            <ui-form-item prop="type" label="客户类型">
              <ui-input v-model="ruleForm.customerNo" placeholder="请输入" class="input-width"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="8">
            <ui-form-item prop="institution" label="客户姓名">
              <ui-input v-model="ruleForm.customerName" placeholder="请输入" class="input-width"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>

        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="8">
            <ui-form-item prop="type" label="证件号码">
              <ui-input v-model="ruleForm.customerId" placeholder="请输入" class="input-width"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="8">
            <ui-form-item prop="type" label="联系电话">
              <ui-input v-model="ruleForm.customerPhone" placeholder="请输入" class="input-width"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-button type="primary" @click="submitForm('ruleForm')">查询</ui-button>
          <ui-button @click="resetForm('ruleForm')">重置</ui-button>
        </ui-row>
      </ui-form>
    </div>
    <div class="table-list">
      <div class="table-list-header">
        <div class="list-title">客户列表</div>
        <ui-button @click="claim">认领</ui-button>
      </div>

      <vx-table :table-data="tableData" :columns="columns" :isSelect="true"></vx-table>
      <div class="page">
        <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout" @current-change="handleCurrentChange">
        </ui-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table';
export default {
  components: {
    vxTable,
  },
  data() {
    return {
      ruleForm: {},
      total: 100,
      pageSize: 10,
      currentPage: 1,
      layout: 'total, prev, pager, next, jumper', // 分页顺序
      columns: [
        { prop: 'customerNo1', label: '客户经称', fixed: true },
        { prop: 'customerNo2', label: '客户类型', fixed: true },
        { prop: 'customerNo3', label: '联系电话', fixed: true },
        { prop: 'customerNo4', label: '证件类型', fixed: true },
        { prop: 'customerNo5', label: '证件号码', fixed: true },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.customer-claim-container {
  .account-query {
    overflow: hidden;
    h1 {
      font-size: 20px;
      margin-bottom: 20px;
    }
  }
  .table-list {
    margin-top: 20px;
    .table-list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      .list-title {
        font-size: 20px;
        font-weight: 600;
      }
    }
  }
}
</style>
